<template>
  <!-- 注册和登录界面 -->
  <div class="login-regist-contrainer">
    <el-image :src="require('@/assets/logo.png')" />
    <el-tabs v-model="activeName">
      <el-tab-pane label="登录" name="/login">
        <el-form
          class="login-regist-form"
          auto-complete="on"
          label-position="left"
        >
          <el-form-item size="mini" v-if="showError">
            <el-alert
              :title="errorMsg"
              type="error"
              center
              show-icon
              :closable="false"
            >
            </el-alert>
          </el-form-item>
          <el-form-item prop="username">
            <el-input
              v-model="loginForm.str1"
              name="username"
              type="text"
              auto-complete="on"
              :placeholder="loginMethod ? '请输入手机号' : '请输入用户名'"
              :prefix-icon="
                loginMethod ? 'el-icon-mobile-phone' : 'el-icon-user'
              "
            />
          </el-form-item>
          <el-form-item prop="password" v-if="!loginMethod">
            <el-input
              v-model="loginForm.str2"
              type="password"
              name="password"
              auto-complete="on"
              placeholder="请输入密码"
              prefix-icon="el-icon-lock"
              show-password
            />
          </el-form-item>
          <el-form-item v-else>
            <el-input
              v-model="loginForm.str2"
              name="password"
              auto-complete="on"
              placeholder="请输入验证码"
            >
              <template slot="append" class="login-regist-append">
                <el-button type="primary" @click="getMsg">{{
                  countdown
                }}</el-button>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" class="login-button" @click="login">
              登录
            </el-button>
          </el-form-item>
          <el-form-item v-show="!loginMethod">
            <el-col :lg="12" :push="1">
              <el-checkbox @change="rememberPassword = !rememberPassword"
                >记住密码</el-checkbox
              >
            </el-col>
            <el-col :lg="12" :push="6">
              <router-link to="">忘记密码?</router-link>
            </el-col>
          </el-form-item>
          <el-form-item>
            <el-col :lg="10" :push="1">
              <span class="login-regist-method" @click="changeLoginMethod">
                {{ loginMethod ? "账号密码登录?" : "手机短信登录？" }}
              </span>
            </el-col>
            <el-col :lg="14" :push="1">
              <span>快速登录：</span>
              <span @click="loginByThirdParty">
                <svg-icon icon-class="QQ" class="login-icon" />
              </span>
              <span @click="loginByWeiXin">
                <svg-icon icon-class="weixin" class="login-icon" />
              </span>
              <span @click="loginByGitHub">
                <svg-icon icon-class="GitHub" class="login-icon" />
              </span>
              <span @click="loginByThirdParty">
                <svg-icon icon-class="weibo" class="login-icon" />
              </span>
            </el-col>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="注册" name="/regist">
        <el-form
          class="regist-login-form"
          auto-complete="on"
          label-position="left"
        >
          <el-form-item prop="username">
            <el-input
              name="username"
              v-model="registerForm.phone"
              type="text"
              auto-complete="on"
              placeholder="请输入手机号"
            />
            <el-input
              v-model="registerForm.username"
              placeholder="请输入用户名"
            />
            <el-input
              v-model="registerForm.password"
              auto-complete="on"
              show-password
              placeholder="请输入密码"
            />
            <el-input v-model="registerForm.account" placeholder="请输入账户" />
          </el-form-item>
          <el-form-item>
            <el-checkbox v-model="userRegist"
              >我已阅读并同意《用户注册协议》</el-checkbox
            >
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              class="regist-button"
              :disabled="!userRegist"
              @click="register"
            >
              注册
            </el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import cookie from "js-cookie";

export default {
  name: "LoginAndRegist",
  data() {
    return {
      activeName: this.$route.path,
      loginMethod: 1,
      showError: 0,
      userRegist: true,
      //登录表单
      loginForm: {
        str1: "", //用户名或手机号
        str2: "", //密码或验证码
      },
      rememberPassword: false,
      //错误消息提示
      errorMsg: "",
      //倒计时300s
      second: 300,
      //点击获取短信按钮，会将文本修改为时间
      countdown: "获取短信",
      registerForm: {
        phone: "",
        username: "",
        password: "",
        account: "",
      },
    };
  },
  methods: {
    register() {
      this.$http
        .post(`http://localhost:9999/user/user/register`, this.registerForm)
        .then((res) => {
          if (!res.data.code) {
            //当前页面刷新
            window.location.reload();
          } else {
            this.errorMsg = "用户已存在!";
            this.showError = 1;
          }
        });
    },
    // 第三方登录
    loginByThirdParty() {},
    loginByWeiXin() {
      this.$http
        .get(`http://localhost:9999/user/api/ucenter/wx/wxlogin`)
        .then((res) => {
          if (!res.data.code) window.location.href = res.data.data;
          this.$route.push("/all");
        });
    },
    loginByGitHub() {
      this.$http.get(`http://localhost:9999/user/github/login`).then((res) => {
        //console.log(res.data)
        window.location.href = res.data;
      });
    },
    getMsg() {
      if (this.loginForm.str1 == "") {
        this.errorMsg = "手机号码不正确!";
        this.showError = 1;
      } else {
        this.$http
          .get(
            `http://localhost:9999/user/user/msgLogin/${this.loginForm.str1}`
          )
          .then((res) => {
            console.log(res.data.code);
            if (!res.data.code) {
              this.setMsgTime();
            } else {
              this.errorMsg = "手机号码不正确!";
              this.showError = 1;
            }
          });
      }
    },
    // 切换登录方式
    changeLoginMethod() {
      this.loginMethod = !this.loginMethod;
      this.showError = 0;
    },
    //登录
    login() {
      if (this.loginMethod) {
        //短信登录
        this.$http
          .get(
            `http://localhost:9999/user/user/checkCode/${this.loginForm.str1}/${this.loginForm.str2}`
          )
          .then((res) => {
            if (!res.data.code) {
              this.$router.push("/all");
            } else {
              this.errorMsg = "手机号码不正确!";
              this.showError = 1;
            }
          });
      } else {
        //账号登录
        this.$http
          .post(`http://localhost:9999/user/user/login`, this.loginForm)
          .then((res) => {
            var data = res.data;
            if (data.code == 0) {
              console.log(data.data);
              cookie.set("token", data.data, { domain: "localhost" });

              this.$http
                .get(`http://localhost:9999/user/user/getUserInfo`)
                .then((res) => {
                  if (!res.data.code) {
                    cookie.set("userInfo", res.data.data, {
                      expires: 7,
                      domain: "localhost",
                    });
                    this.$router.push("/all");
                  }
                });
            } else {
              this.errorMsg = "用户名或密码错误!";
              this.showError = 1;
            }
          });
      }
    },
    //记住登录信息
    setCookie() {
      this.rememberPassword = !this.rememberPassword;
    },

    //设置短信倒计时
    setMsgTime() {
      var time = this.second;
      var result = setInterval(() => {
        this.countdown = --time;
        console.log(time);
        if (time < 1) {
          this.countdown = "获取短信";
          clearInterval(result);
        }
      }, 1000);
    },
  },
};
</script>
<style>
.login-icon {
  font-size: 24px;
  cursor: pointer;
}
.regist-button,
.login-button {
  width: 100%;
}
.login-regist-method {
  cursor: pointer;
  color: rgb(0, 153, 255);
}
.login-regist-form .el-image,
.regist-login-form .el-image {
  vertical-align: middle;
  width: 22px;
  height: 22px;
}
.login-regist-form,
.regist-login-form {
  width: 60%;
  margin: auto auto;
}
.login-regist-contrainer {
  width: 50%;
  margin: 5% auto;
  -webkit-box-shadow: 0px 3px 3px #c8c8c8;
  -moz-box-shadow: 0px 3px 3px #c8c8c8;
  box-shadow: 0px 3px 3px #c8c8c8;
}
.login-regist-contrainer > .el-tabs {
  width: 96%;
  margin: auto auto;
}
</style>